<template>
    <div class="home-body" v-loading="loadingData">
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="0" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                    @select="jobChangeHandle" active-text-color="#ffd04b">
                    <el-menu-item index="0">
                        <span slot="title">综合</span>
                    </el-menu-item>
                    <template v-if="recruitList != null">
                        <el-menu-item v-for="item in recruitList" :index="item.jobId.toString()" :key="item.jobId">
                            <span slot="title">{{ item.jobName }}</span>
                        </el-menu-item>
                    </template>

                </el-menu>
            </el-aside>
            <el-main>
                <div class="btn-box">
                    <el-button class="choose-btn" type="primary" @click="personScreenBox = true">筛选 <i class="el-icon-search"></i></el-button>
                </div>
                <template v-if="userList">
                    <!-- 人员列表 -->
                    <div class="card-box">
                        <!-- 循环从这里开始 -->

                        <div class="box-card" v-for="item in userList" :key="item.expectId"  @click="$store.dispatch('resumeDialogVisible',item.userDO.userId);">
                            <el-card>
                                <div class="card-item">
                                    <div class="head-icon">
                                        <div class="icon" style="margin-top: 30px;">
                                            <template v-if="!item.userDO.headIcon">
                                                <img src="@/assets/images/default/user.png" />
                                            </template>
                                            <template v-else>
                                                <img :src="item.userDO.headIcon" />
                                            </template>
                                        </div>
                                    </div>
                                    <div class="user-info">
                                        <div class="user-name">
                                            <el-button  type="text">
                                        <span class="name">{{ item.userDO.username }}</span>
                                    </el-button>
                                            
                                            <span class="amount">
                                                <template v-if="item.startSalary != 0">
                                                    {{ item.startSalary / 1000 + item.startSalary % 1000 }}K
                                                </template>
                                                <template v-if="item.startSalary == 0">最高</template>
                                                <template v-else-if="item.maxSalary != 0">-</template>
                                                <template v-else>起</template>
                                                <template v-if="item.maxSalary">
                                                    {{ item.maxSalary / 1000 + item.maxSalary % 1000 }}K
                                                </template>
                                            </span>
                                        </div>
                                        <hr />
                                        <div class="request-info">
                                            <span>求职意向</span>
                                            <span class="recruit">{{ item.jobDO.jobName }}</span>
                                        </div>
                                        <div class="request-detail">
                                            <p class="line-hid">期望行业：{{ item.industryDO.industryName }}</p>
                                            <p class="line-hid top-spacing">期望城市：{{ item.regionDO.regionName }}</p>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>

                    </div>
                    <!-- 分页器 -->
                    <div class="page-box">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="careenExpect.pageNum" :page-sizes="[4, 6, 8, 10]"
                            :page-size="careenExpect.pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </template>
            </el-main>

            <el-dialog title="人员筛选" :visible.sync="personScreenBox" center :show-close="false" width="45%">
                <el-form :model="careenExpect" :inline="true">
                    <el-form-item label="薪资范围:" style="margin-left: 25px;">
                        <el-radio-group v-model="salaryRange" @change="salaryRangeChangeHandle">
                            <el-radio style="margin-left: 45px;" :label="1">范围薪资</el-radio>
                            <el-radio style="margin-left: 40px;" :label="2">最高薪资</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="起始薪资:" style="margin-left: 25px;">
                        <el-input type="number" :disabled="salaryRange == 2" v-model="careenExpect.startSalary" placeholder="请输入起始薪资"
                            style="width: 200px;"></el-input>
                    </el-form-item>

                    <el-form-item label="最高薪资:" style="margin-left: 30px;">
                        <el-input type="number" v-model="careenExpect.maxSalary" placeholder="请输入最高薪资"
                            style="width: 200px; text-decoration: none;"></el-input>
                    </el-form-item>

                    <el-form-item label="薪资结算方式:">
                        <el-select v-model="careenExpect.payMethod" placeholder="请选择薪资结算方式" style="width: 200px;">
                            <el-option v-for="(item, index) in payMethods" :key="index" :label="item"
                                :value="index"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="学历要求:" style="margin-left: 28px;">
                        <el-select v-model="careenExpect.degree" placeholder="请选择学历要求" style="width: 200px;">
                            <el-option v-for="(item, index) in degrees" :key="index" :label="item"
                                :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelScreen">取 消</el-button>
                    <el-button @click="resetScreen">重 置</el-button>
                    <el-button type="primary" @click="getUserListHandle">确 定</el-button>
                </span>
            </el-dialog>
        </el-container>


    </div>
</template>

<script>
import { getPersonList, getRecruitList } from '@/api/home';
export default {
    data() {
        return {
            payMethods: ["日结", "周结", "月结", "小时工", "面议"],
            degrees: ["中学", "高中", "中专", "大专", "本科", "硕士", "博士"],
            careenExpect: {
                jobId: null,
                startSalary: null,
                maxSalary: null,
                payMethod: null,
                degree:null,
                pageNum: 1,//当前页
                pageSize: 4,
            },
            salaryRange: 1,//薪资范围
            userList: null,
            recruitList: null,
            total: null,
            personScreenBox: false,
            loadingData:true
        }
    },
    methods: {
        //查询hr发布过的职位
        getRecruitListHandle() {
            getRecruitList().then(res => {
                this.recruitList = res.data
            })
        },
        //切换职位，查看对应职位的人员筛选
        jobChangeHandle(index) {
            if (index == 0) {
                this.careenExpect.jobId = null
            } else {
                this.careenExpect.jobId = parseInt(index)
            }
            this.getUserListHandle()
        },
        //查询人员列表
        getUserListHandle() {
            this.loadingData = true
            this.personScreenBox = false
            getPersonList(this.careenExpect).then(res => {
                this.userList = res.data.list
                console.log(this.userList);
                
                this.total = res.data.total
                this.loadingData = false
            })
        },
        //调整每页几条
        handleSizeChange(val) {
            this.careenExpect.pageSize = val
            this.getUserListHandle()
        },
        //调整第几页
        handleCurrentChange(val) {
            this.careenExpect.pageNum = val
            this.getUserListHandle()
        },
        //薪资范围选择
        salaryRangeChangeHandle() {
            if (this.salaryRange == 2) {
                this.careenExpect.startSalary = null
            }
        },
        //取消人员筛选
        cancelScreen(){
            this.personScreenBox = false
        },
        //重置查询条件
        resetScreen(){
            this.careenExpect.startSalary = null
            this.careenExpect.maxSalary = null
            this.careenExpect.payMethod = null
            this.careenExpect.degree = null
            this.getUserListHandle()
            this.personScreenBox = false
        }
    },
    created() {
        this.getRecruitListHandle()
        this.getUserListHandle()
    }
}
</script>

<style scoped>
.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height: 85vh;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    height: 85vh;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}


.btn-box {
    display: flex;
}

.choose-btn {
    margin-left: auto;
    margin-right: 50px;
}

.card-box {
    margin-top: 20px;
    height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.box-card {
    display: inline-block;
    margin-left: 75px;
    margin-top: 10px;
    width: 500px;
}

.card-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.head-icon {
    height: 150px;
}

.icon {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(30, 30, 30, .3);
    border-radius: 50%;
    background-color: rgba(30, 30, 30, .3);
    overflow: hidden;
    margin-top: 10px;
}

.icon img {
    width: 100%;
}

.user-collection {
    margin-left: 5px;
    margin-top: 20px;
}

.user-info {
    margin-left: 30px;
    width: 350px;
    height: 150px;

}

.user-name {
    margin-bottom: 10px;
}

.name {
    margin-left: 50px;
    font-size: 20px;
    color: black;
}

.amount {
    margin-left: 120px;
}



.request-info {
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
}

.recruit {
    display: inline-block;
    width: 180px;
    margin-left: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.request-detail {
    margin-top: 10px;
    margin-left: 10px;
}

.line-hid {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-spacing {
    margin-top: 10px;
}

.page-box {
    margin-top: 20px;
    text-align: center;
}
</style>